<template>
  <div class="zsList">
      <div class="nav">
          <ul>
              <li class="all">综合...<span></span></li>
              <li>距离</li>
              <li class="num">销量</li>
              <li class="choice">筛选<span></span></li>
          </ul>
      </div>
        <ul class="subnav">
            <li>双十一热卖</li>
            <li>双十一热卖</li>
            <li>双十一热卖</li>
            <li>双十一热卖</li>
        </ul>
        <ul class="shoplist">
            <li v-for="item in list" :key = 'item.shop_id'>
                <div class="left">
                    <img :src="item.shop_image" alt="">
                </div>
                <div class="right">
                    <h3>{{item.shop_name}}</h3>
                    <div class="favour"><i></i><b>{{item.shop_score}}</b><span>月售{{item.shop_sales_nums}}</span></div>
                    <div class="distance">
                        <span>起送 ￥{{item.min_price}}</span>
                        <span>配送 ￥{{item.shipping_fee_price}}</span>
                        <span>2.1km</span>
                        <span>{{item.avg_delivery_time}}分钟</span>
                    </div>
                    <div class="good">
                        <p>“超好吃，挺不错的”</p>
                    </div>
                    
                    <div class="discount">
                        <span>30减5</span>
                        <span>40减10</span>
                        <span>50减15</span>
                    </div>
                </div>
            </li>
        </ul>
      
  </div>
</template>

<script>
import {getShopList} from '@/api'
export default {
    data(){
        return{
            //所有商家列表
            list:[]
        }
    },
    created(){
        this.shopList()
    },
    methods:{
        //获取所有商家列表
        shopList(){
            getShopList().then(resp => {
                if(resp.data.code == 200){
                    this.list = resp.data.data.list
                }
            })
           
        }
    }
    
}
</script>

<style>
.zsList{
    width: 100%;

}
.zsList .nav{
    width: 100%;
    font-size: .24rem;
    
}
.zsList .nav ul{
    width: 100%;
    height: .76rem;
}
.zsList .nav ul li{
    margin-top: .24rem;
    float: left;
}
.zsList .nav ul .all{
    margin-left: .41rem;
    margin-right: .82rem;
    color: #389CCE;
}
 .zsList .nav ul .num{
    margin-left: .84rem;
 }
 .zsList .nav ul .choice{
    float: right; 
    margin-right: .69rem;
 }
 .zsList .subnav{
     width: 6.9rem;
     height: .90rem;
     margin: 0 auto;
     box-sizing: border-box;
     padding: .2rem;
     display: flex;
     justify-content: space-between;
 }
 .zsList .subnav li{
     float: left;
     width: 1.4rem;
     height: .5rem;
     background: #E5E5E5;
     border-radius:.12rem;
     line-height: .5rem;
     font-size: .22rem;
     text-align: center;
 }
 .zsList .shoplist{
     width: 100%;
     box-sizing: border-box;
     padding: 0 .3rem;

 }
 .zsList .shoplist li{
     height: 2.91rem;
     width: 100%;
     box-sizing: border-box;
     padding:.3rem 0;
     border-bottom: .01rem solid #E0E0E0;

 }
 .zsList .shoplist li .left{
     float: left;
     width: 2rem;
     height: 2rem;
     margin-left: .1rem;
     margin-right: .2rem;
 }
 .zsList .shoplist li .left img{
     width: 2rem;
     height: 2rem;
 }
 .zsList .shoplist li .right{
     float: left;
     width: 4.6rem;
 }
.zsList .shoplist li .right h3{
    height:.27rem;
    font-size:.27rem;
    line-height: .27rem;
    font-family:PingFang SC;
    font-weight:500;
    color:rgba(51,51,51,1);
 }
 .zsList .shoplist li .right .favour{
     margin-top: .3rem;
     line-height: .23rem;
     overflow: hidden;

 }
 .zsList .shoplist li .right .favour b{
    width:.35rem;
    height:.19rem;
    font-size:.24rem;
    float: left;
    font-family:PingFang SC;
    font-weight:400;
    color:rgba(245,109,7,1);
 }
 .zsList .shoplist li .right .favour span{
     margin-left: .32rem;
     color: #999999;
     font-size: .24rem;
     float: left;

 }
 .zsList .shoplist li .right .distance{
     width: 100%;
     height: .23rem;
     line-height: .23rem;
     margin: .19rem 0;
     color: #999999;
     font-size: .24rem;
 }
 .zsList .shoplist li .right .distance span:nth-of-type(1){
     margin-right: .27rem 
 }
 .zsList .shoplist li .right .distance span:nth-of-type(3){
     float: right;
 }
 .zsList .shoplist li .right .distance span:nth-of-type(4){
     margin-right: .31rem;
     float: right;
 }
 .zsList .shoplist li .right .good{
     width: 100%;
     float: left;
 }
 .zsList .shoplist li .right p{
    font-size:.22rem;
    font-family:PingFang SC;
    font-weight:400;
    color:rgba(245,109,7,1);
    height:.4rem;
    line-height: .4rem;
    background:rgba(255,245,236,1);
    padding: 0 .17rem;
    float: left;
    margin-bottom: .2rem;
    box-sizing: border-box;
 }
 .zsList .shoplist li .right .discount{
     width: 100%;
     height: .3rem;
 }
 .zsList .shoplist li .right .discount span{
     float: left;
     padding: 0 .07rem 0 .12rem;
     border: .01rem solid #F96F65;
    margin-right: .1rem;
    font-size:.22rem;
    font-family:PingFang SC;
    font-weight:400;
    color:rgba(249,111,101,1);
 }
</style>